<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-客户管理'" :headtype="2"></page-head> -->
<!-- 		<view class="orderManage">
			<view id="tabsBox" class="tabsBox" :style="'top:'+topHeight+'px'">
				<view style="padding: 0 50rpx;border-bottom: solid 1rpx #ccc;">
					<liuyuno-tabs :tabData="tabs" :defaultIndex="tabIndex" @tabClick='tabClick' :config="tabConfig" />
				</view>
				<view style="padding: 0 50rpx;">
					<liuyuno-tabs :tabData="tabs2" :defaultIndex="tabIndex2" @tabClick='tabClick2' :config="tabConfig" />
				</view>
			</view>
		</view> -->
		<!-- <view class="oList margin30" :style="'margin-top:'+pageTop+'px'"> -->
		<mescroll-body ref="mescrollRef" :up="{
			  	noMoreSize: 10,
			  	empty: {
			  		icon: '/static/image/order_null.png',
			  		tip: '暂无数据~',
			  		fixed: false
			  	}
			  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<image class="bgimg" src="https://fx.senge.com/uploads/mini/sengeimg/my_bg.png"></image>
				<view class="oList margin30 Red flex-s" style="margin-top: -270rpx; width: 690rpx;">
					<view class="oTop clearfix flex-start">
							<view class="" style="width: 104rpx;">
								<image class="itemImg" :src="dataList.avatar"/>
							</view>
							<view class="oUserName">{{dataList.nickname}}</view>
						<view class="">
							<image v-if="dataList.level==1" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/my_py.png" mode=""></image>
							<image v-if="dataList.level==2&& dataList.user_type==0||dataList.level==2 &&dataList.user_type==1" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/mypttk.png" mode=""></image>
							<image v-if="dataList.level==2 && dataList.user_type==2" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myzysqtk.png" mode=""></image>
							<image v-if="dataList.level==3 && dataList.level_type==0" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/mysqtk.png" mode=""></image>
							<image v-if="dataList.level==3 && dataList.level_type==2" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myzjtk.png" mode=""></image>
							<image v-if="dataList.level==4" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myjxs.png" mode=""></image>
						</view>
					</view>
					<view class="ckxj" v-if="dataList.level==2||dataList.level==3||dataList.level==4" 
					@click="apifun.navigate(dataList.level==3? '/bundle_b/pages/level-two':'/bundle_b/pages/level-four','user_id='+dataList.id)">查看下级</view>
				</view>
				<view class="" style="height: 1400rpx;"></view>
				<view class="oList margin30 Blue">
					<view class="item">
						<view class="oBottom"> 
							<view class="obItem flex-s"><text class="obItem_tit">真实姓名</text><text class="obItem_text">{{dataList.real_name||'--'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">生&emsp;&emsp;日</text><text class="obItem_text">{{dataList.birthday||'--'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">性&emsp;&emsp;别</text><text class="obItem_text">{{dataList.sex||'--'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">联系方式</text><text class="obItem_text">{{dataList.mobile||'--'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">关联日期</text><text class="obItem_text">{{dataList.create_time||'--'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">支付单数</text><text class="obItem_text">{{dataList.order_num}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">交易金额</text><text class="obItem_text">{{dataList.order_amount}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">售后单数</text><text class="obItem_text">{{dataList.sh_order_number}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">售后金额</text><text class="obItem_text">{{dataList.sh_order_amount}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">最近交易时间</text><text class="obItem_text">{{dataList.order_time || ' --'}}</text> </view>
							<view class="obItem flex-s"><text class="obItem_tit">解除倒计时</text><text class="obItem_text">{{dataList.binding_time}}天</text> </view>
						</view>
					</view>
				</view>
			</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {getKeFirstlist} from '@/api/user'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
			dataList:[],
			id:''
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log('this.id',this.id)
			this.KeFirstlist()
		},
		methods: {
			async KeFirstlist(){
				const {
					data,
					code
				} = await getKeFirstlist({user_id: this.id})
				if (code == 1) {
					this.dataList = data
				}
			},
			// upCallback(page) {
				// let pageNum = page.num; // 页码, 默认从1开始
				// let pageSize = page.size; // 页长, 默认每页10条
				// let {
				// 	orderType,
				// } = this;
				// getKeFirstlist({
				// 	// page_size: pageSize,
				// 	// page_no: pageNum
				// 	user_id: this.id
				// }).then(({
				// 	data
				// }) => {
				// 	this.dataList = data
				// 	// let curPageData = data.list;
				// 	// let curPageLen = curPageData.length;
				// 	// let hasNext = !!data.more;
				// 	// if (page.num == 1) this.dataList = [];
				// 	// // this.dataList = this.dataList.concat(curPageData);
				// 	// console.log(this.dataList)
				// 	// this.mescroll.endSuccess(curPageLen, hasNext);
				// })
			// },
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
	}
	.tabsBox{
		width: 100%;
		background-color: #efefef;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.oList{
		/* padding: 28rpx 0 12rpx; */
		/* min-height: 90vh; */
	}
	.oList .item{
		margin-bottom: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6rpx 0px rgba(140,140,140,0.43);
		border-radius: 10rpx;
		padding: 0rpx 0rpx 10rpx;
	}
	.itemImg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.ml{
		margin-left: 20rpx;
		padding-top: 20rpx;
	}
	.oUserName{
		font-size: 32rpx;
		color: #753f32;
		margin-left: 22rpx;
		margin-right: 16rpx;
	}
	.oTime{
		font-size: 22rpx;
		margin-top: 10rpx;
	}
	.oTop{
		padding: 18rpx 0 18rpx 18rpx;
		width: 540rpx;
		/* border-bottom: solid 1rpx rgba(0,0,0,0.05); */
	}
	.oBottom{
		padding: 20rpx 38rpx;
	}
	.obItem{
		display:flex;
		font-size: 30rpx;
		color: #999999;
		line-height: 115rpx;
		border-bottom: #f4f4f4 solid 1rpx;
	}
	.obItem_tit{
		color: #000;
	}
	.obItem .flex{
		flex: 1;
	}
	.lookMore{
		padding: 10rpx 0 30rpx;
		text-align: center;
		font-size: 23rpx;
		color: #898A8B;
	}
	.vip_img{
		width: 160rpx;
		height: 44rpx;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.Red{
		position: absolute;
	}
	.Blue{
		width: 690rpx;
		position: absolute;
		top: 200rpx;
	}
	.ckxj{
		background-color: #fedbc2;
		color: #753f32;
		padding: 8rpx 12rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
	}
</style>
